<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/plantuml-encoder@1.4.0/dist/plantuml-encoder.min.js"></script>
</head>
<body>
<div id="plantuml-container">
    <!-- 假设 PlantUML 生成的 SVG 已经放到这里 -->
    <object id="plantuml-svg" type="image/svg+xml" data="http://www.plantuml.com/plantuml/svg/SoWkIImgAStDuNBCoKnEICt9p4pYo4ZDoSa70000"></object>
</div>

<script>
    document.getElementById("plantuml-svg").addEventListener("load", function() {
        const svgDoc = this.contentDocument; // 拿到 SVG DOM
        const node = svgDoc.querySelector("text"); // 假设我们找第一个文本元素
        node.style.fill = "red"; // 高亮
        node.addEventListener("click", () => {
            alert("你点击了 PlantUML 节点！");
        });

        // 动态添加一个新元素
        const newCircle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        newCircle.setAttribute("cx", 200);
        newCircle.setAttribute("cy", 200);
        newCircle.setAttribute("r", 20);
        newCircle.setAttribute("fill", "blue");
        svgDoc.querySelector("svg").appendChild(newCircle);
    });
</script>


</body>
</html>
